<template>
     <div id="app">
        <el-card class="box-card">
        <div slot="header" class="clearfix">
            <div class="h1" v-html="msg"></div>
            <div class="h2" v-html="subTitle"></div>
            <!--在引用自定义组件的时候，接收分发的内容，绑定事件-->
            <!-- <el-popover
              ref="popover5"
              placement="top"
              width="160"
              v-model="newTodoNull">
              <p>写点东西吧</p>
            </el-popover>
            <todo-input v-popover:popover5 v-on:add-todo="addTodo"></todo-input>
            -->
            <todo-input v-on:add-todo="addTodo"></todo-input>


        </div>

        <el-dialog title="错误提示" v-model="dialogVisible" size="tiny" style="width:1000px;">
          <span>太懒了吧，什么都不写👎你</span>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
          </span>
        </el-dialog>
        <!---将 todos 和 filter 参数传递到子组件中-->
        <todo-list :todos="todos" :filter="filter"></todo-list>
        <todo-footer v-on:set-filter="setFilter" :filter="filter"></todo-footer>
        <!-- :filter 传递数据到 子组件中-->
        </el-card>
     </div>
</template>

<script>
import TodoInput from './components/Input.vue';
import TodoList from './components/TodoList.vue';
import TodoFooter from './components/TodoFooter.vue';
import Storage from './Storage.js';
export default {
    name : 'app',
    data () {
      return {
        newTodoNull: false,
        dialogVisible: false,
        todos : Storage.fetch(),
        // filter : 'all', 改进 -> 读取上次过滤的值
        filter: Storage.fetchById(),
        msg : 'Vue2.x+ElementUI 实现简单的ToDo<br/>vue2+element-ui+localStorage+perfect-scrollbar',
        subTitle: '1、组件之间的通信 2、本地缓存技术'
      }
    },
    created(){
      console.log('获取本地缓存数据---->>>'+Storage.fetch().toString())
    },
    methods : {
        addTodo(newTodo){
          console.log('---接收到添加的数据了--addTodo----')
            if(!newTodo){
              console.log('--这里没有搞懂，$refs 的使用--暂时先注释了')

              this.$message({
                message: '填写之后在提交，不知道吗？👎',
                type: 'error',
                showClose: true,
                duration: 10000
              });

              // 改进弹出层
              // this.dialogVisible = true;

              // console.log(this.$refs.todoInput);
              // this.$refs.todoInput
              return;
            }
            this.todos.push({value:newTodo, completed:false})
            Storage.store(this.todos)
        },
        setFilter(newfilter){
          // 改变了 filter 的值，会影响
          this.filter = newfilter
          console.log(this.todos)
          Storage.storeById(this.filter)
          Storage.store(this.todos)
        }
    },
    components :{
        TodoInput,
        TodoList,
        TodoFooter
    }
}
</script>

<style>
    body{
        background-color: #F9FAFC;
    }
    #app{
        width: 560px;
        margin: 0 auto;
        font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
    }
    .h1{
        color: #5e6d82;
        font-size : 20px;
        text-align : center;
        padding: 20px 0;
    }

</style>
